<template>
    <div style="padding:0 10px;">
      <div style="padding:36px 0 0 6px;" v-if="stepOptions.length!=0"><steppage :stepsData="stepOptions" :active="stepOptions.length"></steppage></div>
    
      <el-table style="margin-top: 10px;" :header-cell-style="getRowClass" border align="center" v-if="!vObj.isUpdate" :data="lcListOptions" class="tableAutoBtn">
          <qttable v-for="(item,index) in tabUserList2" :key="index" :header="item"></qttable>
       </el-table>
       <el-table max-height="400px" style="margin-top: 10px;" :header-cell-style="getRowClass" border  v-else :data="lcListOptions" class="tableAutoBtn">
          <qttableedit ref="qttableeditRef"  v-for="(item,index) in tabUserList2" :key="index" :header="item"></qttableedit>
          <el-table-column align="center" prop="" width="100"  label="操作">
            <template slot-scope="scope">
              <el-button @click="getRowClick(scope.row)">修改</el-button>
            </template>
          </el-table-column>
       </el-table>
       <div style="text-align: center;">
        <el-button style="margin-top: 10px;" type="primary" @click="dialogTableVisible=true" v-if="iscommit">提交意见</el-button>
        <el-button style="margin-top: 10px;"  @click="resetForm('return')">返回</el-button>
       </div>


       <el-dialog :close-on-click-modal="false" title="提交意见" width="35%" :visible.sync="dialogTableVisible">
        <el-form class="fromClass" label-width="100px">
          <el-form-item label="是否同意" prop="resource">
            <el-radio-group v-model="resource">
              <el-radio label="同意">同意</el-radio>
              <el-radio label="不同意">不同意</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="意见" prop="textarea">
            <el-input
            type="textarea"
            :rows="5"
            maxlength="1000"
            placeholder="请输入内容"
            v-model="textarea">
          </el-input>
          </el-form-item>
          <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>


      <el-dialog
      title="修改"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="50%"
      :before-close="handleClose">
      <el-form ref="form" class="autoClass" :model="dialogform" label-width="100px">
        <el-form-item  :label="item.title" v-for="(item,index) in dialogformOptions" :key="index">
          <el-input v-model="dialogform[item.key]"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="isOk">确 定</el-button>
      </span>
    </el-dialog>

    </div>
</template>

<script>
  import qttable from '../components/qt_header_table_noedit'
  import qttableedit from '../components/qt_header_table_noedit'
  import steppage from './step'
  import {activiticompleteTask} from '@/api/home_/adminCenter'
  export default {
    props:{
        stepOptions:{
            type:Array,
            default:[],
            require:true
        },
        lcListOptions:{
            type:Array,
            default:[],
            require:true
        },
        tabUserList2:{
            type:Array,
            default:[],
            require:true
        },
        iscommit:{
            type:Boolean,
            default:false,
            require:false
        },
        vObj:{
            type:Object,
            default:()=>{
              return {}
            },
            require:true
        }
    },
    data(){
        return{
          dialogTableVisible:false,
          rowStr:null,
          dialogformOptions:[],
          dialogform:{},
          dialogVisible:false,
          textarea:"",
          resource:"同意"
        }
    },
    created(){
     
    },
    components: {qttable,steppage,qttableedit},
    methods:{
      getRowClass({ rowIndex, columnIndex }) {
            if (rowIndex == 0) {
                return 'background:#f2f5f8;fontSize:14px;color:#515a6e;'
            }
        },
        isOk(){
          let lcListOptionsStr = JSON.parse(JSON.stringify(this.lcListOptions))
          let i = 0
          lcListOptionsStr.forEach((item,index)=>{
            if(item.flowId==this.rowStr){
              i = index
            }
          })
          let keys = Object.keys(this.dialogform)
          keys.forEach((item,index)=>{
            lcListOptionsStr[i][item] = this.dialogform[item]
          })
          this.lcListOptions = JSON.parse(JSON.stringify(lcListOptionsStr))
          this.dialogVisible = false
        },
        getTitleKeys(v,list){
          list.forEach((item,index)=>{
            if(!item.children || item.children.length==0){
              v.push({
                key:item.jsonKey,
                title:item.jsonValue
              })
            }else{
              this.getTitleKeys(v,item.children)
            }
          })
        },
        getRowClick(row){
          this.rowStr = row.flowId
          let a = []
          this.dialogform = {}
          this.getTitleKeys(a,this.tabUserList2)
          a.forEach((item,index)=>{
            this.$set(this.dialogform,item.key,row[item.key])
          })
          this.dialogformOptions = JSON.parse(JSON.stringify(a))
          this.dialogVisible = true
        },
        submitForm(){
            let text = this.textarea.trim()
            if(this.resource=='不同意'&& text.length==0){
                this.$message.error('请填写意见')
                return
            }
            activiticompleteTask({
                "procinstId":this.vObj.procinstId,
                "userId":JSON.parse(sessionStorage.getItem('userInfo')).user_id,
                "param": {
                    "status":this.resource,
                    "suggest":text.length==0?'无意见':this.textarea,
                    "data":this.vObj.isUpdate?this.lcListOptions:[]
                }
            }).then(res=>{
                if(res.code==200){
                  this.$parent.resetForm()
                  this.$parent.getUserList()
                  this.resource = '同意'
                  this.textarea = ''
                  this.$message.success(res.msg)
                }else{
                    this.$message.error(res.msg)
                }
            })
        },
        resetForm(){
          this.$parent.resetForm()
        },
    }
  }
</script>

<style  lang="scss" scoped>
  .fromClass{
    .el-form-item{
      width:100%;
    }
  }
>>>.el-collapse-item__header {
    background: #f2f5f8;
    padding-left: 10px;
}
  
  .autoClass{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .autoClass .el-form-item{
    width:50%;
  }
</style>